<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表单元素</title>
        <style lang="">
            #box{
                width: 350px;
                margin: 50px auto;
            }
            form div{
                margin: 30px 0;
            }
            #to {
				width: 100%;
				height: 50px;
				background-color: blue;
				position: sticky;
				top: 0px;
			}
			
			.tobu { 
				width: 80px;
				height: 50px;
				background-color: yellow;
				list-style: none;
				float: left;
				text-align: center;
				line-height: 50px;
			}
            #clear {
				clear: both;
			}
			
			#to ul li {
				margin-left: 20px;
				list-style: none;
			}
			
			#to ul {
				margin-left: 50px;
			}
			
			#tp {
				width: 100%;
				height: 500px;
			}
        </style>
    </head>
    <body>
        <div id="to">
			<ul>
				<li class="tobu">
					<a href="../华为/index.html">华为</a>
				<li>
				<li class="tobu">
					<a href="./表单元素.html">填写资料</a>
				<li>
				<li class="tobu">
					<a href="../我的家乡/index.html">我的家乡</a>
				<li>
				<div id="clear"></div>
			</ul>
		</div>
        <div id="box">
            <form action="/login.php" method="get">
                <div>
                    <!-- label：行元素；标签的意思，一般配合input输入框使用，对input起解释说明作用；for="id"属性表示点击label使得对应id的input得到响应（获取焦点） -->
                    <label for="username">用户名：</label>
                    <!-- type="text"表示文本输入框； -->
                    <!-- placeholder表示占位符，当输入框内容为空时的提示信息； -->
                    <!-- value表示输入框的内容； -->
                    <!-- autocomplete表示（当刷新页面时）是否自动填充,on(自动填充),off(不自动填充) -->
                    <!-- pattern做输入验证的；[A-Za-z]{3}:3个大小写；[A-Za-z]{3,7}:3到7个大小写字母；[A-Za-z0-9]{3,7}3到7个大小写字母或者数字；[\u4e00-\u9fa5]{2,4}中文2到4位；^1[3456789]\d{9}$匹配手机号； -->
                    <!-- name表示将来提交服务器时，发送数据的字段名 -->
                    <input type="text" id="username" placeholder="请输入用户名" value="admin" autocomplete="on" pattern="[\u4e00-\u9fa5]{2,4}" name="username">
                </div>
                
                <div>
                    <label for="password">密&#x3000;码：</label>
                    <!-- type="password"表示密码框 -->
                    <input type="password" id="password" placeholder="请输入密码" pattern="^[A-Z]\w{8,}" name="password">
                </div>

                <div>
                    <!-- type="date" 日历 -->
                    <label for="birth">出&#x3000;生：</label>
                    <input type="date" id="birth" name="birth">
                </div>

                <div>
                    <label>性&#x3000;别：</label>
                    <!-- type="radio"表示单选框 -->
                    <!-- checked表示默认选中哪个选项 -->
                    <!-- 单选框里面input的name属性值保持一样 -->
                    <!-- value表示传递给服务器的数据 -->
                    <label for="male">男 
                        <input type="radio" id="male" name="gender" value="1" checked>
                    </label>
                    <label for="female">女 
                        <input type="radio" id="female" value="0" name="gender">
                    </label>
                    <label for="unknow">未知
                        <input type="radio" id="unknow" value="-1" name="gender">
                    </label>
                </div>

                <div>
                    <label>爱&#x3000;好：</label>
                    <!-- type="checkbox"多选框 -->
                    <label for="basketball">篮球
                        <input type="checkbox" id="basketball" value="0" name="hobby">
                    </label>
                    <label for="basketball">乒乓球
                        <input type="checkbox" id="pingpangball" value="1" name="hobby">
                    </label>
                    <label for="drink">喝酒
                        <input type="checkbox" id="drink" value="2" name="hobby">
                    </label>
                    <label for="smoke">抽烟
                        <input type="checkbox" id="smoke" value="3" name="hobby">
                    </label>
                </div>

                <div>
                    <label for="subject">专&#x3000;业：</label>
                    <select name="subject" id="subject">
                        <option value="0">砍树</option>
                        <option value="1">司机</option>
                        <option value="2">开锁</option>
                        <option value="3">按摩</option>
                    </select>
                </div>

                <div>
                    <!-- type="file"文件选择 -->
                    <!-- accept 接受 image/*图片/任何格式 -->
                    <label for="headimg">头&#x3000;像：</label>
                    <input type="file" id="headimg" accept="image/*">
                </div>

                <div>
                    <label for="info">备&#x3000;注：</label>
                    <textarea name="info" id="info" cols="30" rows="3" placeholder="请备注其他信息"></textarea>
                </div>

                <!-- 重置 -->
                <div><input type="reset" value="重置"></div>
                <!-- 提交 -->
                <div><input type="submit" value="登陆"></div>
            </form>
        </div>
    </body>
</html>
